<script setup>
import { Icon } from '@iconify/vue';
import { useRouter } from 'vue-router';
import morePopup from '@/views/mine/component/morePopup.vue'
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import Posters from '@/components/Posters.vue'
import { showSuccessToast, showToast } from 'vant';
import { UploadImage, UpdateAppUserInfo } from "@/api/user.js"
import { QueryVideoList } from '@/api/home'
import useStore from "@/store/index.js";
const { userInfo } = useStore()
const router = useRouter()
const user = computed(() => userInfo.userInfo)
const mainref = ref(null)
const top = ref(null)
const nav = ref(null)
const imgbgc = ref("https://dy.ttentau.top/images/aTnyHICCi-NMudWfVELeO.png")
const active = ref(1)
const list = ref([])
const rightWidth = ref(-700)
const videoList = ref([])
const tabList = ref([
	{ id: 1, title: "作品" },
	{ id: 2, title: "私密" },
	{ id: 3, title: "喜欢" },
	{ id: 4, title: "收藏" },
])
onMounted(() => {
	document.querySelector(".leftBox").addEventListener("scroll", () => {
		if (document.querySelector(".leftBox").scrollTop > 100) {
			top.value.style.display = "none"
			nav.value.style.display = "block"
		} else {
			top.value.style.display = "block"
			nav.value.style.display = "none"
		}
	})

})
// 未实现 功能
const unrealized = () => {
	showToast("未实现")
}
// 更多功能
const more = () => {
	rightWidth.value = -400
}
const overlyFlay = () => {
	rightWidth.value = -700
}


// 更新头像
const updateAvatar = async (e) => {
	try {
		const formdata = new FormData()
		formdata.append("file", e.target.files[0])
		const res = await UploadImage(formdata)
		const params = { ...userInfo.userInfo }
		params.avatar = res.data
		console.log(params)
		await UpdateAppUserInfo(params)
		await userInfo.getUserInfo()
		showSuccessToast("修改头像成功")
	} catch (e) {
	}
}


// 获取视频列表 
const loadVideoList = async () => {
	const res = await QueryVideoList({ page: 1, pageSize: 20, userId: user.value.id })
	videoList.value = res.data.records.filter(item => item.type == active.value).sort((a, b) => a.isTop - b.isTop);
}
loadVideoList()
</script>

<template>
	<div class="mine_page">
		<div class="h-[100%] flex absolute transition-all" :style="{ right: rightWidth + 'px' }">
			<!-- 左边盒子 -->
			<div class="leftBox w-[100vw] h-[100%]">
				<div class="w-[100vw]">
					<!-- 顶部选项 -->
					<div ref="top">
						<div class="fixed top-[0px] z-10 flex justify-between px-[15px] h-[46px] items-center w-[100%]">
							<!-- 左侧 -->
							<div class="text-[14px] h-[30px] flex px-[10px] items-center rounded-[20px] bg-[#52505080] text-[#fff]">
								<Icon icon="ri:edit-fill" />
								<span class="ml-[5px]" @click="router.push('/editInfo')">编辑资料</span>
							</div>
							<!-- 右侧 -->
							<div class="flex">
								<div class="item" @click="unrealized">
									<Icon icon="fluent-emoji-high-contrast:middle-finger" />
								</div>
								<div class="item" @click="unrealized">
									<Icon icon="eva:people-outline" />
								</div>
								<div class="item" @click="unrealized">
									<Icon icon="ic:round-search" />
								</div>
								<div class="item" @click="more">
									<Icon icon="ic:round-menu" />
								</div>
							</div>
						</div>
					</div>
					<!-- 滚动导航栏 -->
					<div ref="nav" style="display: none">
						<div
							class="fixed top-[0px] z-20  justify-between px-[15px] h-[46px] items-center w-[100%] bg-[#000000] flex items-center"
							style="justify-content: flex-end;">
							<div class="text-[#fff] mr-[70px]">杨老虎(磕穿下巴掉牙版本)</div>
							<div class="flex">
								<Icon icon="ic:round-search" class="text-[22px] mr-[10px]" />
								<Icon icon="ic:round-menu" class="text-[22px]" @click="more" />
							</div>
						</div>
					</div>
					<!-- 主体-->
					<main ref="mainref">
						<!-- header -->
						<header :style="{ backgroundImage: `url(${imgbgc})` }">
							<div class="info flex items-center absolute bottom-[10px] p-[20px]">
								<!--头像-->
								<div class="w-[100px] h-[100px] relative avatar">
									<img v-if="user.avatar" :src="user.avatar" class="p-[2px] w-[100%] h-[100%] avatar" />
									<div v-else class="flex flex-col justify-center items-center h-full font-bold">
										<span>点击</span>
										<span>上传头像</span>
									</div>
									<input @change="updateAvatar" type="file"
										class="absolute w-full h-full left-0 top-0 rounded-[50%] opacity-0">
								</div>
								<div class="right">
									<p class="name">{{ user.nickname }}</p>
									<div class="number mb1r">
										<span>抖音号:{{ user.code }}</span>
									</div>
								</div>
							</div>
						</header>
						<!-- 基本简介 -->
						<div class="intro">
							<div class="w-[100%] flex mb-20px justify-between items-center">
								<div class="text-[#bababb] flex items-center justify-between gap-[26px]">
									<div class="flex items-center text-[13px] flex-col">
										<span class="text-[#fff] text-[14px] font-bold">{{ user.likeNumber || 0 }}</span>
										<span>获赞</span>
									</div>
									<div class="flex items-center text-[13px] flex-col">
										<span class="text-[#fff] text-[14px] font-bold">{{ user.friendNumber || 0 }}</span>
										<span>朋友</span>
									</div>
									<div class="flex items-center text-[13px] flex-col">
										<span class="text-[#fff] text-[14px] font-bold">{{ user.attentionNumber || 0 }}</span>
										<span>关注</span>
									</div>
									<div class="flex items-center text-[13px] flex-col">
										<span class="text-[#fff] text-[14px] font-bold">{{ user.privacyNumber || 0 }}</span>
										<span>粉丝</span>
									</div>
								</div>
								<div class="px-[20px] py-[8px] text-[15px] flex items-center text-[#fff] bg-[#3a3a46] rounded-[4px]"
									@click="unrealized">
									添加朋友
								</div>
							</div>
							<div class="text-[13px] text-[#95aaac] flex items-center mb-[8px] mt-[10px]"
								@click="router.push('/editInfo')">
								<span>点击添加介绍，让大家认识你...</span>
								<img src="@/assets/write-gray.png" class="h-[15px] ml-[10px]" />
							</div>
							<div class="mb-[10px] text-[#95aaac] flex gap-[8px]">
								<div class="age py-[2px] px-[5px] bg-[#3a3a4666] text-[12px] flex items-center rounded-[2px]">
									<img src="@/assets/woman.png" class="h-[10px] mr-[2px]" v-if="user.sex == 1" />
									<img src="@/assets/man.png" alt="" v-if="user.sex == 2" />
									<span>{{ user.age }}岁</span>
								</div>
								<div class="py-[2px] px-[5px] bg-[#3a3a4666] text-[12px] flex items-center rounded-[2px]">
									{{ user.address }}
								</div>
								<div class="py-[2px] px-[5px] bg-[#3a3a4666] text-[12px] flex items-center rounded-[2px]">
									{{ user.school }}
								</div>
							</div>
							<div class="flex">
								<div class="w-[20vw] mr-[25px] flex flex-col items-center gap-[6px] text-[12px] text-[#808080]"
									@click="unrealized">
									<Icon icon="iconamoon:shopping-card-light" class="text-[20px] text-[#fff]" />
									<span>抖音商城</span>
								</div>
								<div class="w-[20vw] mr-[25px] flex flex-col items-center gap-[6px] text-[12px] text-[#808080]"
									@click="unrealized">
									<Icon icon="iconamoon:music-2-light" class="text-[20px] text-[#fff]" />
									<span>我的音乐</span>
								</div>
								<div class="w-[20vw] mr-[25px] flex flex-col items-center gap-[6px] text-[12px] text-[#808080]"
									@click="unrealized">
									<Icon icon="streamline:chat-two-bubbles-oval" class="text-[20px] text-[#fff]" />
									<span>我的群聊</span>
								</div>
								<div class="w-[20vw] mr-[25px] flex flex-col items-center gap-[6px] text-[12px] text-[#808080]"
									@click="unrealized">
									<Icon icon="iconamoon:shopping-card-light" class="text-[20px] text-[#fff]" />
									<span>查看更多</span>
								</div>
							</div>
						</div>
						<!-- tabs -->
						<van-tabs sticky v-model:active="active" title-active-color="#fff" title-inactive-color="#808080"
							line-width="110px" line-height="2px" color="#ffd700" offset-top="45px" @change="loadVideoList()">
							<van-tab :title="item.title" v-for="item in tabList" :name="item.id" :key="item.id">
								<!-- 作品内容 -->
								<div class="video_list mt-[1px]">
									<div class="text-[10px] text-[#bababb] h-[40px] flex items-center justify-center"
										v-if="active == 2 || active == 3 || active == 4">
										<img src="../../assets/lock-gray.png" class="h-[12px] mr-[5px]" />
										<span v-if="active == 2">只有你能看到设为私密的作品和日常</span>
										<span v-if="active == 3">只有你能看到自己的喜欢列表</span>
										<span v-if="active == 4">只有你能看到自己的收藏列表</span>
									</div>
									<Posters :list="videoList" v-if="videoList.length"></Posters>
								</div>
							</van-tab>
						</van-tabs>
					</main>
				</div>
			</div>
			<!-- 右边盒子 -->
			<morePopup v-model:rightWidth="rightWidth" @overlyFlay="overlyFlay" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.leftBox {
	height: 100%;
	overflow-y: auto;
}

.mine_page {
	height: calc(100vh - 65px);
	position: relative;
	overflow: hidden;
	color: #fff;
}

.item {
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #52505080;
	border-radius: 50%;
	margin-left: 10px;
	font-size: 22px
}

header {
	position: relative;
	color: white;
	height: 190px;
	background-image: url('../../assets/img/header-bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	box-sizing: border-box;

	.info {

		gap: 15px;

		.avatar {
			background: black;
			padding: 2px;
			border-radius: 50%;
		}

		.name {
			font-size: 16px;
			margin-bottom: 5px;
		}

		.number {
			font-size: 12px;
			display: flex;
			align-items: center;

			img {
				width: 12px;
				margin-left: 5px;
			}
		}
	}
}

.intro {
	transform: translateY(-10px);
	background: #000000;
	padding: 15px 15px 0 15px;
	border-radius: 14px 14px 0 0;
}

:deep(.van-tabs__nav) {
	background: #000000 !important;
}
</style>
